<template>
  <Card>
    <Form ref="searchData" :model="searchData" label-colon autocomplete="off">
      <Row style="height: 40px">
        <Col span="8">
          <FormItem prop="permissionName" label="角色名称" :label-width="80">
            <Input v-model="searchData.permissionName"/>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem prop="valid" label="状态" :label-width="50">
            <Select v-model="searchData.valid" clearable>
              <Option value="1">启用</Option>
              <Option value="0">停用</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem style="margin-left: 2em">
            <Button type="primary" @click="queryData(true)">
              <Icon type="ios-search"/>
              查询
            </Button>
            <Button style="margin-left: 2em" type="primary" ghost @click="handleReset('searchData')">
              <Icon type="md-sync"/>
              重置
            </Button>
          </FormItem>
        </Col>
      </Row>
      <permission-button-group @handleEvent="handleEvent" permission-code-prefix="role_">
        <Button style="margin-left: 5px" type="dashed"  @click="handleEvent('refresh_auth')"><Icon type="md-refresh" />刷新权限</Button>
      </permission-button-group>
    </Form>
    <div>
      <Table border ref="selection" :columns="columns" :data="resultData" @on-selection-change="selectItem"></Table>
    </div>
    <div class="ivu-mt ivu-text-center">
      <Page :total="pager.total" :current="pager.current" show-elevator @on-change="pageChange"
            @on-page-size-change="pageSizeChange" :show-sizer="true"/>
    </div>
    <role-details :title="modalTitle" :show-modal="showModal" :can-edit="canEdit" :role-id="roleId"
                  :reload-data="true" @callbackByCancel="callbackByCancel" @callbackByOk="callbackByOk"/>
  </Card>

</template>

<script>
import {search, deleteData,refreshAuth} from '@/api/roleApi'
import RoleDetails from '@/views/settings/role/components/role-details'
import PermissionButtonGroup from "@/components/permissionButton/permission-button-group";

export default {
  components: {
    RoleDetails,
    PermissionButtonGroup
  },
  data() {
    return {
      showModal: false,
      modalTitle: '添加权限角色',
      canEdit: false,
      selectItems: [],
      roleId: null,
      searchData: {
        permissionCode: '',
        permissionName: '',
        permissionType: '',
        systemCode: ''
      },
      ruleValidate: {},
      pager: {
        size: 10,
        current: 1,
      },
      resultData: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '角色名称',
          key: 'roleName',
          align: 'center'
        },
        {
          title: '状态',
          key: 'valid',
          align: 'center',
          render: (h, params) => {
            if (params.row.valid === 1) {
              return h('span', '正常')
            } else {
              return h('span', '关闭')
            }

          }
        },
        {
          title: '说明',
          key: 'description',
          align: 'center'
        }
      ]
    }
  },
  created() {

  },
  mounted() {
    this.queryData()
  },
  watch: {},
  methods: {
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    pageChange(page) {
      this.pager.current = page
      this.queryData()
    },
    pageSizeChange(pageSize) {
      this.pager.size = pageSize
      this.pager.current = 1
      this.queryData()
    },
    queryData(isSearch) {
      if (isSearch) {
        this.pager.current = 1
      }
      search({
        pager: this.pager,
        queryData: this.searchData
      }).then(res => {
        this.resultData = res.records
        this.pager.total = res.total
      })
    },
    callbackByCancel() {
      this.showModal = false
    },
    callbackByOk() {
      this.showModal = false
      this.queryData()
    },
    selectItem(row) {
      this.selectItems = row
    },
    handleEvent(event) {
      if (event === 'refresh_auth'){
        refreshAuth().then(()=>{
          this.$Message.success('权限刷新成功！')
        })
      }
      else if (event === 'role_add') {
        this.modalTitle = '添加权限角色'
        this.roleId = null
        this.canEdit = true
        this.showModal = true
      } else {
        if (this.selectItems.length === 0) {
          this.$Message.error('请先选择数据，后操作！')
          return
        }
        if (event === 'role_view' || event === 'role_edit') {
          this.canEdit = event !== 'role_view'
          this.modalTitle = '权限角色'
          this.roleId = this.selectItems[0].id
          this.showModal = true
        }
        if (event === 'role_delete') {
          let selectDataIds = []
          this.selectItems.forEach((item) => {
            selectDataIds.push(item.id)
          })
          deleteData(selectDataIds).then(res => {
            this.$Message.success('删除成功！')
            this.queryData()
          })
        }

      }
    }
  }
}
</script>

<style scoped>

</style>